<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
	<title>注册网易免费邮箱-中国第一大电子邮件服务商</title>
	
	<link rel="shortcut icon" href="zong/img/favicon.ico">

	<link href="zong/css/mai.css" rel="stylesheet" type="text/css">

	<style type="text/css">
		
	</style>
</head>
<body>
<header class="header">
	<div class="bg"></div>
	<div class="links">
	<a href="#">了解更多|</a>
	<a href="#">反馈意见</a>
</div>
	
</header>
<section class="content">
	<header>
	<h1 class="content-tit">
	欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。
	</h1>
	</header>
	<div class="main-wrapper">
	<!--左边表单区域——-->
	<div class="mainBody">
		<!--Tab标签页菜单-->
		<div class="regTabs">
			<ul>
				<li><a style="color: #fff" href="#">注册字母邮箱</a></li>
				<li><a href="#">注册手机号码邮箱</a></li>
				<li><a href="#">注册VIP邮箱</a></li>
			</ul>
			
		</div>
<!--注册字母邮箱窗体-->
<div class="regForm">
	<dl class="regForm-item">

	<dt class="regForm-title">
	<span class="txt-imp">*</span>
	邮箱地址
	</dt>

	<dd class="regForm-ct">
	<input type="text" class="ipt">
	<span>@</span>
	<select>
		<option selected="selected">163.com</option>
		<option selected="selected">360.com</option>
	</select>
 <div class="ipt-tip">
	<span>
		6~18个字符，可使用字母、数字、下划线，需以字母开头
	    </span>
       </div>
      </dd>
	</dl>




	<dl class="regForm-item">

	<dt class="regForm-title">
	<span class="txt-imp">*</span>
	密码
	</dt>

	<dd class="regForm-ct">

	<input type="text" class="ipt" style="width: 322px">
	
 <div class="ipt-tip">
	<span>
		6~16个字符，区分大小写
	    </span>
       </div>
      </dd>
	</dl>



	<dl class="regForm-item">

	<dt class="regForm-title">
	<span class="txt-imp">*</span>
	确认密码
	</dt>

	<dd class="regForm-ct">
	<input type="text" class="ipt" style="width: 322px">
	
 <div class="ipt-tip">
	<span>
		请再次填写密码
	    </span>
       </div>
      </dd>
	</dl>





 <dl class="regForm-item">
    <!--输入框前文本-->
	<dt class="regForm-title">
	   <span class="txt-imp">*</span>手机号码
	</dt>

	<dd class="regForm-ct">
		<!--输入文本框-->
	<input id="phone" type="text" class="ipt" style="width: 322px; font-size: 14px;font-weight: bold; padding-left: 40px;" value="+86">

	<!--国旗图标与下拉箭头-->
	<div class="itl" style="width: 35px;height: 27px;line-height: 27px;">
	<div class="flag flag-CN">
		<em>&nbsp;</em>
	</div>
 </div>
 <!--下拉列表选项-->
 <div class="select_panel" style="display: none;">
	<a href="#" class="flag-CN">
		<em></em>
		中国+86
	</a>
	<a href="#" class="flag-AL">
		<em></em>
		阿尔巴尼亚(Shqipëria) +355
	</a>
	
 </div>


	<!--输入提示-->
 <div class="ipt-tip">
 	<span>
		忘记密码时，可以通过该手机号码快速找回密码
	    </span>
       </div>
      </dd>
	</dl>

</div>

<!--注册手机号码窗体-->
<div class="regForm" style="display: none;">
	<dl class="regForm-item">

	<dt class="regForm-title">
	<span class="txt-imp">*</span>
	邮箱地址
	</dt>

	<dd class="regForm-ct">
	<input type="text" class="ipt">
	<span>@</span>

	<select>
		<option selected="selected">163.com</option>
		<option selected="selected">126.com</option>
	</select>
	
 <div class="ipt-tip"> 

	 <span>
		6~18个字符，可使用字母、数字、下划线，需以字母开头
	       </span>
         </div>
       </dd>
	</dl>




	<dl class="regForm-item">

	<dt class="regForm-title">
	<span class="txt-imp">*</span>
	密码
	</dt>

	<dd class="regForm-ct">

	<input type="text" class="ipt" style="width: 322px">
	
 <div class="ipt-tip">
	<span>
		6~16个字符，区分大小写
	    </span>
       </div>
      </dd>
	</dl>



	<dl class="regForm-item">

	<dt class="regForm-title">
	<span class="txt-imp">*</span>
	确认密码
	</dt>

	<dd class="regForm-ct">
	<input type="text" class="ipt" style="width: 322px">
	
 <div class="ipt-tip">
	<span>
		请再次填写密码
	    </span>
       </div>
      </dd>
	</dl>





 <dl class="regForm-item">
    <!--输入框前文本-->
	<dt class="regForm-title">
	   <span class="txt-imp">*</span>手机号码
	</dt>

	<dd class="regForm-ct">
		<!--输入文本框-->
	<input id="phone" type="text" class="ipt" style="width: 322px; font-size: 14px;font-weight: bold; padding-left: 40px;" value="+86">

	<!--国旗图标与下拉箭头-->
	<div class="itl" style="width: 35px;height: 27px;line-height: 27px;">
	<div class="flag flag-CN">
		<em>&nbsp;</em>
	</div>
 </div>
 <!--下拉列表选项-->
 <div class="select_panel" style="display: none;">
	<a href="#" class="flag-CN">
		<em></em>
		中国+86
	</a>
	<a href="#" class="flag-AL">
		<em></em>
		阿尔巴尼亚(Shqipëria) +355
	</a>
	
 </div>


	<!--输入提示-->
 <div class="ipt-tip">
 	<span>
		忘记密码时，可以通过该手机号码快速找回密码
	    </span>
       </div>
      </dd>
	</dl>

</div>

<!--注册VIP窗体-->
<div class="regForm" style="display: none;">
	<dl class="regForm-item">

	<dt class="regForm-title">
	<span class="txt-imp">*</span>
	邮箱地址
	</dt>

	<dd class="regForm-ct">
	<input type="text" class="ipt">
	<span>@</span>
	<select>
		<option selected="selected">163.com</option>
		<option selected="selected">126.com</option>
	</select>
 <div class="ipt-tip">
	<span>
		6~18个字符，可使用字母、数字、下划线，需以字母开头
	    </span>
       </div>
      </dd>
	</dl>




	<dl class="regForm-item">

	<dt class="regForm-title">
	<span class="txt-imp">*</span>
	密码
	</dt>

	<dd class="regForm-ct">

	<input type="text" class="ipt" style="width: 322px">
	
 <div class="ipt-tip">
	<span>
		6~16个字符，区分大小写
	    </span>
       </div>
      </dd>
	</dl>



	<dl class="regForm-item">

	<dt class="regForm-title">
	<span class="txt-imp">*</span>
	确认密码
	</dt>

	<dd class="regForm-ct">
	<input type="text" class="ipt" style="width: 322px">
	
 <div class="ipt-tip">
	<span>
		请再次填写密码
	    </span>
       </div>
      </dd>
	</dl>





 <dl class="regForm-item">
    <!--输入框前文本-->
	<dt class="regForm-title">
	   <span class="txt-imp">*</span>手机号码
	</dt>

	<dd class="regForm-ct">
		<!--输入文本框-->
	<input id="phone" type="text" class="ipt" style="width: 322px; font-size: 14px;font-weight: bold; padding-left: 40px;" value="+86">

	<!--国旗图标与下拉箭头-->
	<div class="itl" style="width: 35px;height: 27px;line-height: 27px;">
	<div class="flag flag-CN">
		<em>&nbsp;</em>
	</div>
 </div>
 <!--下拉列表选项-->
 <div class="select_panel" style="display: none;">
	<a href="#" class="flag-CN">
		<em></em>
		中国+86
	</a>
	<a href="#" class="flag-AL">
		<em></em>
		阿尔巴尼亚(Shqipëria) +355
	</a>
	
 </div>


	<!--输入提示-->
 <div class="ipt-tip">
 	<span>
		忘记密码时，可以通过该手机号码快速找回密码
	    </span>
       </div>
      </dd>
	</dl>

</div>

	</div>




<!--右边的广告区域-->
	<div class="mainBody-side">
	<img src="assets/imgans/reg_master.gif">
	</div>

	</div>
</section>


<script type="text/javascript">
	function select_flag(){
		/****/
		var links=document.querySelectorAll(".select_panel a");

		for(i=0;i<links.length;i++){
			links[i].addEventListener("click",function(e){
				var target= e.target;
				var cls = target.className;
				var txt = target.innerText;
				/*字符串处理*/
				var phone = txt.substr(txt.indexOf("+"),txt.length-txt.indexOf("+"));

				/*设置input的valur值*/
				document.getElementById('phone').setAttribute('value',phone);
				/*切换国旗*/
				var div = document.querySelector('.flag');
				div.className="flag " +cls;
			})
		}
	};

   
    function switchFlag(){

    	var div=document.querySelector('.flag');
    	var panel=document.querySelector('.select_panel');
    	

    	div.addEventListener("click",function(e){
    		
    		//三元运算
    		//panel.style.display==="none"? panel.style.display="block" : panel.style.display="none";

            if(panel.style.display==="none"){
            	panel.style.display="block";
            }

            else{
            	panel.style.display="none";
            }

    	})

    		
    }

   
   function switchTab(){

       var tabs=document.querySelectorAll('.regTabs ul li a');
       var ul=document.querySelector(".regTabs ul");

       var panels=document.querySelectorAll('.regForm');

       for(var i=0;i<tabs.length;i++){
        tabs[i].index=i;
       	panels[i].index=i;
       	tabs[i].addEventListener("click",function(e){

       		var a=e.target;
       		/**设置UL标签的背景图片位置*/
       		ul.style.background="url(assets/imgans/tab.jpg) no-repeat 0 -"+a.index*56+"px";

       		/**把所有的A标签的字体颜色设置为黑色**/
       		for(var j=0;j<tabs.length;j++){
       			tabs[j].style.color="#000";

       			panels[j].style.display="none";
       		}

       		/**把当前的A标签字体颜色设置为白色**/
            a.style.color="#fff";
            panels[a.index].style.display="block";
       	})
       }

   }

	select_flag();

	switchFlag();

    switchTab();

</script>


</body>
</html>